<template>
  <div
    class="echart"
    id="echart-line"
    :style="{ float: 'left', width: '100%', height: '230px' }"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      name: "亲密度",
      xData: [],
      yData: [],
    };
  },
  mounted() {
  },
  methods: {
    initChart(name, xData, yData) {
      let getchart = echarts.init(document.getElementById("echart-line"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [name],
          bottom: "0%",
        },
        grid: {
          //调整图表上下左右位置
          top: "3%",
          left: "3%",
          right: "8%",
          bottom: "12%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: name,
            type: "line",
            stack: "总量",
            data: yData,
            smooth: true
          },
        ],
      };

      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },
  },
  async beforeCreate() {
    let res = await this.$http.get("/go/reply/stat/replyByUid", {
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    console.log(res.data);
    let temp = res.data.data;


    for(let i=0;i<temp.length;i++){
        this.xData.push(temp[i].username)
        this.yData.push(temp[i].countuid)
    }
    console.log(this.xData,this.yData)
    await this.initChart(this.name, this.xData, this.yData);

  },
};
</script>